<!-- 短信验证 -->
<template>
	<view>
		<view class="p-3">
			<view class="bt-block">
				<bg-cell2 label="姓名" :value="$store.getters.name"></bg-cell2>
				<bg-cell2 label="身份证号" :value="$store.state.user.idCardNo"></bg-cell2>
				<bg-cell2 label="手机号" :value="$store.state.user.phone"></bg-cell2>
				<bg-cell2 :border="false" label="验证码" >
					<template slot="value">
						<u-input type="number" v-model="msgCode" border="none" inputAlign='right' placeholder="请输入">
							<template slot="suffix">
								<view class="text-red" @click="startCode"> {{tips}} </view>
							</template>
						</u-input>
					</template>
				</bg-cell2>
				<u-code :seconds="60" ref="uCode" @change="codeChange" @end="end" unique-key="page-sms"></u-code>
				
			</view>
		</view>
		<view class="bt-footer">
			<bg-btn @click="goto">
				{{btnTitle}}
			</bg-btn>
		</view>
	</view>
	
</template>

<script>
	import { getCode, checkCode } from '@/api/login'
	
	export default {
		data() {
			return {
				pageTitle:"短信认证",
				btnTitle:'确定',
				targetUrl:'',
				msgCode:'',
				tips:''
			}
		},
		onLoad(options) {
			this.pageTitle = options.title
			this.btnTitle = options.btnTitle
			this.targetUrl = options.targetUrl
			uni.setNavigationBarTitle({
				title: this.pageTitle
			})
		},
		methods: {
			goto(){
				if(!this.msgCode){
					this.$modal.msg("请输入验证码")
					return false
				}
				checkCode({
					code:this.msgCode,
					phone:this.$store.state.user.phone
				}).then(res=>{
					uni.redirectTo({
						url:this.targetUrl
					})
				})
				
			},
			end(){},
			startCode(text){
				if(this.$refs.uCode.canGetCode) {
					if(!this.$store.state.user.phone){
						uni.$u.toast('请填写用户手机号');
						return false
					}
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					
					getCode(this.$store.state.user.phone).then(res=>{
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(e){
				this.tips = e||"获取验证码"
			},
		}
	}
</script>

<style>

</style>
